<template>
  <div>
    欢迎光临vue开发的收银系统
    <table>
      <tr>
        苹果
        {{
          price
        }}
        $/斤,折扣 88折
      </tr>
      <tr>
        请输入你要购买的斤数<input type="number" v-model="kg" />
      </tr>
      <tr>
        <button @click="money">结账</button>
      </tr>
      <tr>
        结账单:总价:{{
          total
        }}$ 折后价
        {{
          pay
        }}$ 优惠
        {{
          save
        }}$
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "VuecliDemoApp",

  data() {
    return {
      price: "5",
      kg: "",
      total: "0",
      pay: "0",
      save: "0",
    };
  },

  mounted() {},

  methods: {
    money() {
      this.total = this.price * this.kg;
      this.pay = this.total * 0.88;
      this.save = this.total - this.pay;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>